{extend name="main"}
{block name="style"}
<style>
    .red-result {
        color: var(--danger);
    }

    .info {
        font-size: 10px !important;
    }

    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .flex-start {
        justify-content: start;
    }

    .clickable:hover {
        cursor: pointer;
    }
</style>
{/block}
{block name="body"}
<div class="bg-white px-2">
    <el-tabs v-model="activeName" @tab-click="activeOther">
        <el-tab-pane label="企微用户" name="work_wechat">
            <div class="p-3">
                <el-form :model="search" @submit.native.prevent="searchSubmit" ref="search" label-position="right" class="flex">
                    <el-form-item label="用户昵称" class="flex mb-0 pl-2">
                        <el-input v-model="search.nickname" placeholder="请输入用户昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" class="flex mb-0 pl-2">
                        <el-input v-model="search.mobile" placeholder="请输入画像手机号"></el-input>
                    </el-form-item>
                    <el-button type="primary" style="margin-left: 10px" @click="searchSubmit">查询</el-button>
                    <el-button>重置</el-button>
                </el-form>
                <el-form style="position: absolute; right: 60px; top: 14px;">
                    <el-form-item>
                        <el-button type="primary" @click="pullFromWorkWechat" icon="el-icon-download">
                            同步企微
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-tab-pane>
        <el-tab-pane label="平台用户" name="converted">
            <div class="p-3">
                <el-form :model="search" @submit.native.prevent="searchSubmit" ref="search" label-position="right" class="flex">
                    <el-form-item label="用户昵称" class="flex mb-0 pl-2">
                        <el-input v-model="search.nickname" placeholder="请输入用户昵称"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" class="flex mb-0 pl-2">
                        <el-input v-model="search.mobile" placeholder="请输入画像手机号"></el-input>
                    </el-form-item>
                    <el-button type="primary" style="margin-left: 10px" @click="searchSubmit">查询</el-button>
                    <el-button>重置</el-button>
                </el-form>
            </div>
        </el-tab-pane>
    </el-tabs>

</div>
<div class="my-2 px-2 flex" style="font-size: 10px; color: var(--secondary)">
    <div class="mx-3 info"><i class="el-icon-info"></i>共&nbsp;<span class="total"
            style="font-size: 14px;font-weight: 600;color: var(--dark);">{{search.total}}</span>&nbsp;条数据</div>
    <div class="mx-3 info"><i class="el-icon-info"></i>已注册平台：<span class="red-result">{{search.total}}</span></div>
    <div class="mx-3 info"><i class="el-icon-info"></i>今日新增：<span class="red-result">{{0}}</span></div>
    <div class="mx-3 info"><i class="el-icon-info"></i>今日流失：<span class="red-result">{{0}}</span></div>
</div>
<div class="bg-white mb-3">
    <div class="table-responsive px-3 pt-3 flex">
        <el-radio-group v-model="search.status" size="small">
            <el-radio-button label="any">全部</el-radio-button>
            <el-radio-button label="no-lost">未流失</el-radio-button>
            <el-radio-button label="lost">已流失</el-radio-button>
        </el-radio-group>
    </div>
    <div class="table-responsive px-4">
        <el-table ref="tableList" :data="tableData" v-loading="search.requesting" style="width: 100%;">
            <el-table-column label="客户信息" width="400">
                <template slot-scope="scope">
                    <div class="flex-v-center" style="position: relative; left: -8%;">
                        <div class="mr-3 mt-2">
                            <el-image v-if="scope.row.avatar" style="width: 60px; height: 60px" :src="scope.row.avatar"></el-image>
                            <el-image v-else style="width: 60px; height: 60px" :src="null"></el-image>
                        </div>
                        <div>
                            <div class="flex">
                                <div class="py-1 ellipsis mw-100px">
                                    {{scope.row.name}}
                                </div>
                                <div class="ml-1 py-1" style="color: var(--success);">@微信</div>
                            </div>
                            <div>
                                <el-tag size="mini" class="mr-1" v-for="(employee, index) in scope.row.employees" v-if="index < 2">{{employee.name}}</el-tag>
                                <el-tooltip class="item" effect="dark" :content="getEmployeesName(scope.row.employees).join('、')" placement="top">
                                    <el-tag size="mini" v-if="scope.row.employees.length > 2" type="info">共<span>{{scope.row.employees.length}}</span>人</el-tag>
                                </el-tooltip>
                            </div>
                            <div>已入<span>{{scope.row.group_count ?? 0}}</span>群</div>
                            <div>创建时间：<span>{{scope.row.create_time}}</span></div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="平台信息" width="300">
                <template slot-scope="scope">
                    <div v-if="scope.row.local_info" class="pl-1">
                        <div class="my-2">
                            <el-tag class="clickable" @click="goToCompany(scope.row.local_info.uid)" type="warning" size="small"
                                v-if="scope.row.local_info.company">
                                <span style="font-size: 12px;">{{scope.row.local_info.company.title}}</span>
                            </el-tag>
                            <el-tag v-else size="small" type="info">暂未绑定企业</el-tag>
                        </div>
                        <div class="my-2">
                            <el-tag class="clickable" @click="goToResume(scope.row.local_info.uid)" type="primary" size="small"
                                v-if="scope.row.local_info.resume">
                                求职者姓名：<span style="font-size: 12px;">{{scope.row.local_info.resume.name}}</span>
                            </el-tag>
                            <el-tag v-else size="small" type="info">暂未创建简历</el-tag>
                        </div>
                        <div class="my-2">
                            <el-tag class="clickable" type="success" size="small" @click="goToUser(scope.row.local_info.uid)">
                                于&nbsp;<span style="font-size: 12px;">{{friendlyTime(scope.row.local_info.register_time)}}</span>&nbsp;注册</el-tag>
                        </div>
                        <div class="my-2">
                            <el-tag type="primary" size="small">注册手机号：<span style="font-size: 12px;">{{scope.row.local_info.mobile}}</span></el-tag>
                        </div>
                    </div>
                    <div v-else class="pl-1">
                        <el-tag type="danger" size="small">暂未注册</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="标签信息" width="100" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.tags.length>  0">
                        <el-tag v-for="(tag, index) in scope.row.tags" :key="index" v-if="index < 2" :type="randTagColor()" class="m-2" size="small">
                            {{tag}}
                        </el-tag>
                        <el-tooltip v-if="scope.row.tags.length > 2" placement="top" effect="light">
                            <template slot="content">
                                <el-tag v-for="(tag, index) in scope.row.tags" :key="index" :type="randTagColor()" class="m-2" size="small">{{tag}}</el-tag>
                            </template>
                            <el-tag type="info" size="small">...</el-tag>
                        </el-tooltip>
                    </div>
                    <div v-else>-</div>
                </template>
            </el-table-column>
            <el-table-column label="最后跟进" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.follow_history.length == 0">
                        -
                    </div>
                    <div v-else>
                        <span>{{getDisplayEmployeesName(scope.row.follow_history[0])}}</span>：
                        <span>{{scope.row.follow_history[0].follow_remark}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="130" align="center">
                <template slot-scope="scope">
                    <div class="my-2">
                        <el-button style="width: 80%" type="warning" size="minism" @click="aboutUser(scope.row)">详情</el-button>
                    </div>
                    <div class="my-2">
                        <el-button style="width: 80%" type="primary" size="minism" @click="newFollowUpping(scope.row)">写跟进</el-button>
                    </div>
                    <div class="my-2">
                        <el-button style="width: 80%" @click="changeFollowHistory(scope.row)" type="info" size="minism">跟进记录</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="table-responsive py-3 m-2 flex-v-center">
        <el-pagination background @size-change="sizeChange" @current-change="currentChange" :current-page="search.page" :page-sizes="[5,10,50]"
            :page-size="search.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="search.total">
        </el-pagination>
    </div>
</div>
<el-drawer :title="followHistory.name+'的跟进记录'" :visible.sync="followRecords" :direction="'rtl'">
    <div v-if="followHistory.follow_history != undefined && followHistory.follow_history.length > 0" class="pt-2 h-100"
        style="overflow-y: scroll; padding-bottom: 90px;">
        <el-card class="m-2" v-for="(record,index) in followHistory.follow_history" :key="index">
            <div>
                内容：<span>{{record.follow_remark}}</span>
            </div>
            <div>
                操作人：<el-tag size="mini" v-if="record.employee_name">{{record.employee_name+'(员工)'}}</el-tag>
                <el-tag size="mini" type="success" v-if="record.admin_name" :class="{'ml-2':!!record.employee_name}">{{record.admin_name+'(管理员)'}}</el-tag>
            </div>
            <div>
                跟进于：<span>{{friendlyTime(record.follow_time)}}</span>
                <br />
                记录于：<span>{{record.create_time}}</span>
            </div>
        </el-card>
    </div>
    <div v-else class="h-100 flex-v-center" style="padding-bottom: 90px;">
        暂无跟进记录~
    </div>
</el-drawer>
<el-dialog title="写跟进" :visible.sync="followUpping" width="30%">
    <el-form :model="followForm" label-position="right" ref="form" @submit.native.prevent="followSubmit" class="px-5">
        <el-form-item label="联系人名称">
            <el-input v-model="followForm.external_username" disabled></el-input>
        </el-form-item>
        <el-form-item label="跟进备注">
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" v-model="followForm.follow_remark"></el-input>
        </el-form-item>
        <el-form-item label="跟进时间">
            <el-date-picker type="datetime" v-model="followForm.follow_time" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="">
            <el-button style="margin: 0 auto;" type="primary" @click="followSubmit">保存</el-button>
        </el-form-item>
    </el-form>
</el-dialog>
{/block}
{block name='script'}
<script type="text/javascript">
    /*{// 如果有从模板引擎传递的参数，请在这里接收，对字符串使用.replace(/[\r\n\s+]/g, '\\n') 过滤非法参数 } */
</script>
<script type="text/javascript">
    const baseView = { view: XYBase.view, /*loading: false*/ }
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                ...baseView,
                activeName: 'work_wechat',
                search: {
                    page: 1,
                    pageSize: 5,
                    type: 0,
                    total: 0,
                    status: 'any'
                },
                followForm: {
                    external_userid: null,
                    external_username: null,
                    follow_remark: null,
                    follow_time: new Date()
                },
                followUpping: false,
                followRecords: false,
                followHistory: {},
                tableData: []
            }
        },
        methods: {
            searchSubmit() {
                this.initHtml()
            },
            changeFollowHistory(row) {
                this.followHistory = row
                this.followRecords = true
            },
            aboutUser(user) {
                window.open(`/potential-user-detail/${user.id}`)
            },
            followSubmit() {
                const _this = this
                $.ajax({
                    url: '/potential/follow-upping',
                    type: 'POST',
                    data: JSON.stringify({
                        external_userid: _this.followForm.external_userid,
                        follow_remark: _this.followForm.follow_remark,
                        follow_time: Math.floor(_this.followForm.follow_time.getTime() / 1000)
                    }),
                    contentType: 'application/json;charset=utf-8;',
                    success(res) {
                        if (res.code != undefined && res.code == 0) {
                            XYBase.success('已提交跟进备注')
                            setTimeout(() => { this.followUpping = false }, 1000)
                        }
                    }
                })
            },
            newFollowUpping(externalUser) {
                this.followForm.external_userid = externalUser.external_userid
                this.followForm.external_username = externalUser.name
                this.followForm.follow_remark = externalUser.follow_remark
                this.followUpping = true
            },
            goToCompany(uid) {
                window.open(`/company?uid=${uid}`)
            },
            goToResume(uid) {
                window.open(`/resume?uid=${uid}`)
            },
            goToUser(uid) {
                window.open(`/user?uid=${uid}`)
            },
            activeOther() {
                if (this.activeName == 'work_wechat') {
                    // 将查询条件切换到企微用户
                    this.search.type = 0
                } else if (this.activeName == 'converted') {
                    // 将查询条件切换到平台用户
                    this.search.type = 1
                }
                this.initHtml()
            },
            getEmployeesName(employees) {
                return employees.map(item => item.name)
            },
            pullFromWorkWechat() {
                const _this = this
                if (this.search.requesting) {
                    return
                }
                this.search.requesting = true
                loading = XYBase.openloading('正在从企微同步：所有员工的客户')
                $.ajax({
                    url: '/talent/pull-potential-user',
                    type: 'POST',
                    success(res) {
                        loading.close()
                        if (res.code != undefined && res.code == 0) {
                            _this.tableData = res.data.data
                            XYBase.success(res.msg)
                        } else if (res.msg != undefined) {
                            XYBase.msg(res.msg)
                        }
                    },
                    error(xhr) {
                        loading.close()
                        XYBase.error(XYBase.config.system_network_error)
                        console.log(xhr)
                    },
                    complete() {
                        _this.search.requesting = false
                    }
                })
            },
            currentChange(val) {
                this.search.page = val
                this.initHtml()
            },
            sizeChange(val) {
                this.search.pageSize = val
                this.initHtml()
            },
            friendlyTime(timestamp) {
                return XYBase.Date.date('Y-m-d H:i:s', new Date(timestamp * 1000))
            },
            randTagColor() {
                const result = ['success', 'warning', 'primary']
                return result[Math.floor(Math.random() * 10 % result.length)]
            },
            initHtml() {
                const _this = this
                $.ajax({
                    url: '',
                    type: 'GET',
                    data: _this.search,
                    success(res) {
                        _this.tableData = res.data.data
                        _this.search.total = res.data.total
                    }
                })
            },
        },
        created() {
            this.initHtml()
            XYBase.created(this)
        },
        computed: {
            getDisplayEmployeesName() {
                return (row) => {
                    return row.employee_name ?? row.admin_name + '(管理员)'
                }
            }
        }
    })
</script>
{/block}